<template>
  <div class="aside_nav" ref="box" @touchstart="startgo" @touchmove="move" @touchend="end">
    <div class="box_img"  @click="show">
      <img src="../../assets/icon/common/aside_nav.gif" alt="" />
    </div>
    
    <transition
    :durtion="300"
      enter-active-class="animate__animated animate__backInRight"
      enter-to-class="animate__animated animate__backInRight"
      leave-active-class="animate__animated animate__backOutRight"
      leave-to-class="animate__animated animate__backOutRight"
    >
      <div class="nav" v-if="isShow">
        <a href="#/index"><van-icon name="wap-home-o" /></a>
        <a href="#/cart"><van-icon name="shopping-cart-o" /></a>
        <a href="#/user"><van-icon name="contact" /></a>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isMove: false,
      distance:0,
    };
  },
  watch:{
    isMove(val){
      if(val){
        document.body.style.overflow = "hidden"
        document.body.addEventListener('touchmove',this.bodyScroll,{passive:false})
      }else{
        document.body.style.overflow = "auto"
         document.body.removeEventListener('touchmove',this.bodyScroll,{passive:false})
      }
    }

  },
  methods: {
    show() {
      this.isShow = !this.isShow;
    },
    startgo() {
    
      this.isMove = true;
      
      // 
    },
    move(e){
      if (this.isMove) {
        
        
        let y = e.touches[0].pageY - this.distance - 21.5
        if(y <= 60 || y>= window.innerHeight - 60){
            return
        }
        this.$refs.box.style.top = y +"px"
        this.$refs.box.style.position = "fixed"
        this.$refs.box.style.bottom = "auto"
        
        
      }
    },
    end(){
      this.isMove = false;
     
    },
    bodyScroll(e){
      e.preventDefault()
    }

    
  },
  mounted() {
    window.addEventListener('scroll',()=>{

      this.distance = window.pageYOffset
    })
  },
  destroyed(){
    window.removeEventListener('scroll',window,false)
  }
};
</script>

<style lang="scss" scoped>
.aside_nav {
  position: fixed;
  right: 17px;
  bottom: 60px;
  
  
  z-index: 200000;
  .box_img {
    width: 43px;
    height: 43px;
    background-color: #fc4141;
    border-radius: 50%;
    > img {
      width: 100%;
      height: 100%;
      transform: rotate(90deg);
    }
  }
  .nav {
    position: absolute;
    left: -127px;
    top: 0;
    width: 120px;
    height: 43px;
    background-color: #fc4141;
    border-radius: 21.5px;
    display: flex;
    justify-content: center;
    a {
      display: block;
      width: 35px;
      color: #fff;
      font-size: 26px;
      text-align: center;
      line-height: 43px;
    }
  }
}

</style>
